<template>
  <!-- 年龄比例 -->
  <div class="echarts">
    <div ref="domRef" :style="echartsStyle" />
  </div>
</template>

<script setup name="PayAmountRatioChart">
import { useEcharts } from '@/hooks/useEcharts'
import { computed } from 'vue'

const echartsStyle = computed(() => {
  return { height: '100%', width: '100%' }
})

let data = [
  { value: 200, name: '扫码收款', percentage: '16%' },
  { value: 110, name: '条码收款', percentage: '8%' },
  { value: 150, name: '快捷支付', percentage: '12%' },
  { value: 310, name: '商城订单', percentage: '24%' },
]

const colors = ['#F6C95C', '#EF7D33', '#1F9393', '#184EA1', '#81C8EF', '#9270CA']

const { domRef } = useEcharts(() => ({
  color: colors,
  tooltip: {
    show: true,
    trigger: 'item',
    formatter: '{b} <br/>占比：{d}%'
  },
  legend: {
    orient: 'vertical',
    right: '20px',
    top: '15px',
    itemGap: 15,
    itemWidth: 14,
    formatter(name) {
      let text = ''
      data.forEach((val) => {
        if (val.name === name) {
          text = `${name} ${val.percentage}`
        }
      })
      return text
    },
    textStyle: {color: '#fff'}
  },
  grid: {top: 'bottom', left: 10, bottom: 10},
  series: [
    {
      zlevel: 1,
      name: '收款方式比例',
      type: 'pie',
      selectedMode: 'single',
      radius: [50, 90],
      center: ['35%', '50%'],
      startAngle: 60,
      label: {
        position: 'inside',
        show: true,
        color: '#fff',
        formatter(params) {
          return params.data.percentage
        },
        rich: {
          b: {
            fontSize: 16,
            lineHeight: 30,
            color: '#fff'
          }
        }
      },
      itemStyle: {
        shadowColor: 'rgba(0, 0, 0, 0.2)',
        shadowBlur: 10
      },
      data: data.map((val, index) => {
        return {
          value: val.value,
          name: val.name,
          percentage: val.percentage,
          itemStyle: {
            borderWidth: 10,
            shadowBlur: 20,
            borderColor: colors[index],
            borderRadius: 10
          }
        }
      })
    },
    {
      name: '',
      type: 'pie',
      selectedMode: 'single',
      radius: [50, 90],
      center: ['35%', '50%'],
      startAngle: 60,
      data: [
        {
          value: 1000,
          name: '',
          label: {
            show: true,
            formatter: '{a|本日总金额}',
            rich: {
              a: {
                align: 'center',
                color: 'rgb(98,137,169)',
                fontSize: 14
              }
            },
            position: 'center'
          }
        }
      ]
    }
  ]
}))
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>